<template>
    <div class="no-data-box" :style="{'border-color': borderColor, 'height': `${height}px`, 'border': Number(border), 'margin': border ? '8px 0' : ''}">
        <slot></slot>
        <span :style="{'color': textColor}">{{text}}</span>
    </div>
</template>
<script>
export default {
    name: 'NodataBox',
    props: {
        border: {
            type: Boolean,
            default: () => { return false }
        },
        text: {
            type: String,
            required: false,
            default: () => { return '暂无数据' }
        },
        borderColor: {
            type: String,
            required: false,
            default: () => { return '#ebebeb' }
        },
        textColor: {
            type: String,
            required: false,
            default: () => { return '#909399' }
        },
        height: {
            type: String || Number,
            required: false,
            default: () => { return '300' }
        }
    }
}
</script>
<style lang="less">
    .no-data-box {
        width: 100%;
        height: 300px;
        border: 1px solid #ebebeb;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        span {
            color: #909399;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>
